<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>
  <meta name='renderer' content='webkit'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge, chrome=1'>
  <link rel='icon' href='../../static/img/favicons/favicon.ico'>
  <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css'>
  <link rel='stylesheet' href='https://cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/styles/github-dark-dimmed.min.css'>
  <title>bAlert - umd - DEMO</title>
  <meta name='description'
        content='Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.'>
  <meta name='keywords'
        content='Bootstrap,Bootstrap5,Alert,dynamic,getInstance,getOrCreateInstance,closed.bs.alert,closed.bs.alert'>
  <script>
    var _hmt = _hmt || [];
    (function () {
      var hm = document.createElement('script')
      hm.src = 'https://hm.baidu.com/hm.js?097448a07faa6124412179f6c9bfc688'
      var s = document.getElementsByTagName('script')[0]
      s.parentNode.insertBefore(hm, s)
    })()
  </script>
</head>
<body>
<div class='container alert alert-primary alert-dismissible fade show' role='alert'>
  <a class='alert-link small' href='../../docs/alert.html' target='_blank' title='docs/bAlert'>docs/bAlert</a>
  <div class='small'>
    <span class='small text-muted'>If you are not a novice, you can click the link above for more detailed information.</span>
  </div>
  <button aria-label='Close' class='btn-close' data-bs-dismiss='alert' type='button'></button>
</div>
<div class='py-sm-5 min-vh-100 bg-primary bg-opacity-50'>
  <div class='py-4 container border rounded text-center' id='container'></div>
</div>

<script src="../../static/js/sampleFunctionCode.js" id="sampleFunctionCode"></script>
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/highlight.min.js"></script>
<script>hljs.highlightAll()</script>
<script type="module">
  // import {bAlert} from 'https://cdn.jsdelivr.net/npm/b-components-js@0.0.3/dist/b.bundle.esm.js/+esm'
  // import { bAlert } from 'https://cdn.jsdelivr.net/npm/b-components-js@0.0.3/dist/bAlert.esm.js/+esm'
  import { bAlert } from '../../../dist/bAlert.esm.js'

  const container = document.querySelector('#container')

  bAlert(container, '1')
  bAlert(container, '22')
  bAlert(container, '333')

  bAlert(container, 'primary', 'primary')
  bAlert(container, 'secondary', 'secondary')
  bAlert(container, 'success', 'success')
  bAlert(container, 'danger', 'danger')
  bAlert(container, 'warning', 'warning')
  bAlert(container, 'info','info')
  bAlert(container, 'light', 'light')
  bAlert(container, 'dark', 'dark')
</script>
</body>
</html>